<template>
	<view class="container">
		<uni-list class="person">
			<uni-list-item title="所属党支部" show-extra-icon>
				<template #header>
					<image
						class="person_avatar"
						src="/static/dangjian/dangyuan/dept.png"
					/>
				</template>
				<template #footer>
					<text class="person_wrapper">{{ info.djDeptName }}</text>
				</template>
			</uni-list-item>
			<uni-list-item title="党员姓名" show-extra-icon>
				<template #header>
					<image
						class="person_avatar"
						src="/static/dangjian/dangyuan/name.png"
					/>
				</template>
				<template #footer>
					<text class="person_wrapper">{{ info.djUserName }}</text>
				</template>
			</uni-list-item>
			<uni-list-item title="应缴党费月份" show-extra-icon>
				<template #header>
					<image
						class="person_avatar"
						src="/static/dangjian/dangyuan/admissionTime.png"
					/>
				</template>
				<template #footer>
					<text class="person_wrapper">{{ info.djCostTime }}</text>
				</template>
			</uni-list-item>
			<uni-list-item title="应缴党费金额" show-extra-icon>
				<template #header>
					<image
						class="person_avatar"
						src="/static/dangjian/dangyuan/money.png"
					/>
				</template>
				<template #footer>
					<text class="person_wrapper">{{ info.djCostValue }}</text>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getUserCost } from '@/net/dangyuanguanli'

const info = ref({})
onLoad(async params => {
	const res = await getUserCost({ djCostId: params.id })
	info.value = res.data
})
</script>

<style lang="scss" scoped>
:deep(.uni-list-item__container) {
	padding: 34rpx 40rpx;
}
.person_avatar {
	width: 50rpx;
	height: 50rpx;
	margin-right: 40rpx;
	> :deep(div) {
		background-size: contain !important;
	}
}
:deep(.uni-list-item__content-title) {
	color: #666;
}
.person_wrapper {
	display: flex;
	align-items: center;
	padding-left: 20rpx;
	color: #0e1634;
}
.person_wrapper,
:deep(.uni-list-item__content-title) {
	font-size: 30rpx;
}
</style>
